<template>
  <div class="container border-1 roundy-5 border-skyblue">
    <table border="1" cellspacing="0">
        <thead class="font-size-13">
            <tr>
                <th colspan="2" rowspan="3">种族值</th>
                <th colspan="2" rowspan="2">
                    能力值范围<br>
                    基础点数·GO力量·奋斗等级
                </th>
            </tr>
            <tr>
            </tr>
            <tr>
                <th width="120px">Lv.50</th>
                <th width="120px">Lv.100</th>
            </tr>
        </thead>
        <tbody class="font-size-13 font-bold">
            <tr class="bg-hp">
                <td width="20%">
                    <div style="width:100%; display:flex">
                        <div style="width:50%">ＨＰ: </div>
                        <div style="width:50%" class="text-right">
                            <span class="margin-left-10">{{pokemon.baseStat.hp}}</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="value-bar bg-hp-bar border-black border-1" 
                    :style="{width: `${pokemon.baseStat.hp/2.57}%`}"></div>
                </td>
                <td class="text-center">
                    {{getValueMaxOrMin(pokemon.baseStat.hp, 50, true, false)}}
                    -
                    {{getValueMaxOrMin(pokemon.baseStat.hp, 50, true, true)}}
                </td>
                <td class="text-center">
                    {{getValueMaxOrMin(pokemon.baseStat.hp, 100, true, false)}}
                    -
                    {{getValueMaxOrMin(pokemon.baseStat.hp, 100, true, true)}}
                </td>
            </tr>
            <tr class="bg-attack">
                <td>
                    <div style="width:100%; display:flex">
                        <div style="width:50%">攻击:</div>
                        <div style="width:50%" class="text-right">
                            <span class="margin-left-10">{{pokemon.baseStat.attack}}</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="value-bar bg-attack-bar border-black border-1" 
                    :style="{width: `${pokemon.baseStat.attack/2.52}%`}"></div>
                </td>
                <td class="text-center">
                    {{getValueMaxOrMin(pokemon.baseStat.attack, 50, false, false)}}
                    -
                    {{getValueMaxOrMin(pokemon.baseStat.attack, 50, false, true)}}
                </td>
                <td class="text-center">
                    {{getValueMaxOrMin(pokemon.baseStat.attack, 100, false, false)}}
                    -
                    {{getValueMaxOrMin(pokemon.baseStat.attack, 100, false, true)}}
                </td>
            </tr>
            <tr class="bg-defense">
                <td>
                    <div style="width:100%; display:flex">
                        <div style="width:50%">防御: </div>
                        <div style="width:50%" class="text-right">
                            <span class="margin-left-10">{{pokemon.baseStat.defense}}</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="value-bar bg-defense-bar border-black border-1" 
                    :style="{width: `${pokemon.baseStat.defense/2.52}%`}"></div>
                </td>
                <td class="text-center">
                    {{getValueMaxOrMin(pokemon.baseStat.defense, 50, false, false)}}
                    -
                    {{getValueMaxOrMin(pokemon.baseStat.defense, 50, false, true)}}
                </td>
                <td class="text-center">
                    {{getValueMaxOrMin(pokemon.baseStat.defense, 100, false, false)}}
                    -
                    {{getValueMaxOrMin(pokemon.baseStat.defense, 100, false, true)}}
                </td>
            </tr>
            <tr class="bg-sp-attack">
                <td>
                    <div style="width:100%; display:flex">
                        <div style="width:50%">特攻: </div>
                        <div style="width:50%" class="text-right">
                            <span class="margin-left-10">{{pokemon.baseStat.spAttack}}</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="value-bar bg-sp-attack-bar border-black border-1" 
                    :style="{width: `${pokemon.baseStat.spAttack/2.52}%`}"></div>
                </td>
                <td class="text-center">
                    {{getValueMaxOrMin(pokemon.baseStat.spAttack, 50, false, false)}}
                    -
                    {{getValueMaxOrMin(pokemon.baseStat.spAttack, 50, false, true)}}
                </td>
                <td class="text-center">
                    {{getValueMaxOrMin(pokemon.baseStat.spAttack, 100, false, false)}}
                    -
                    {{getValueMaxOrMin(pokemon.baseStat.spAttack, 100, false, true)}}
                </td>
            </tr>
            <tr class="bg-sp-defense">
                <td>
                    <div style="width:100%; display:flex">
                        <div style="width:50%">特防: </div>
                        <div style="width:50%" class="text-right">
                            <span class="margin-left-10">{{pokemon.baseStat.spDefense}}</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="value-bar bg-sp-defense-bar border-black border-1" 
                    :style="{width: `${pokemon.baseStat.spDefense/2.52}%`}"></div>
                </td>
                <td class="text-center">
                    {{getValueMaxOrMin(pokemon.baseStat.spDefense, 50, false, false)}}
                    -
                    {{getValueMaxOrMin(pokemon.baseStat.spDefense, 50, false, true)}}
                </td>
                <td class="text-center">
                    {{getValueMaxOrMin(pokemon.baseStat.spDefense, 100, false, false)}}
                    -
                    {{getValueMaxOrMin(pokemon.baseStat.spDefense, 100, false, true)}}
                </td>
            </tr>
            <tr class="bg-speed">
                <td>
                    <div style="width:100%; display:flex">
                        <div style="width:50%">速度: </div>
                        <div style="width:50%" class="text-right">
                            <span class="margin-left-10">{{pokemon.baseStat.speed}}</span>
                        </div>
                    </div>
                </td>
                <td class="padding-0"> 
                    <div class="value-bar bg-speed-bar border-black border-1" 
                    :style="{width: `${pokemon.baseStat.speed/2.52}%`}"></div>
                </td>
                <td class="text-center">
                    {{getValueMaxOrMin(pokemon.baseStat.speed, 50, false, false)}}
                    -
                    {{getValueMaxOrMin(pokemon.baseStat.speed, 50, false, true)}}
                </td>
                <td class="text-center">
                    {{getValueMaxOrMin(pokemon.baseStat.speed, 100, false, false)}}
                    -
                    {{getValueMaxOrMin(pokemon.baseStat.speed, 100, false, true)}}
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    总和:
                    <span class="margin-left-10">{{pokemon.baseStat.total}}</span>
                </td>
            </tr>
            <tr>
                <td colspan="4" rowspan="2">
                    <span class="tips font-size-15">
                        最小能力值以基础点数、个体值均为0，以及性格降低能力值计算。<br>
                    </span> 
                    <span class="tips font-size-15">
                        最大能力值以基础点数为252，个体值为31，以及性格增加能力值计算。
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
  </div>
</template>

<script>
export default {
    name: 'PokemonBaseValue',
    props: ['pokemon'],
    methods:{
        /* 计算最大最小能力值 */
        getValueMaxOrMin(baseValue, level, isHp, isMax){
            let personalValue;  //个体值
            let basicPoint;     //基础点数
            let nature;         //性格补正

            if(isMax){
                personalValue = 31;
                basicPoint = 252;
                nature = 1.1;
            }else{
                personalValue = 0;
                basicPoint = 0;
                nature = 0.9;    
            }

            if(isHp){
                return parseInt((baseValue * 2 + personalValue + basicPoint / 4) * level/100 + 10 + level);
            }else{
                return parseInt(((baseValue * 2 + personalValue + basicPoint / 4) * level/100 +5)* nature);
            }
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 600px;
    overflow: auto;
}

table {
    width: 600px;
    border-top-left-radius: 5px;
    border-collapse: collapse;
}

tr>td:first-child {
    padding: 0 10px;
}

tr {
    height: 26px
}

.value-bar {
    height: 20px;
}

@media screen and (max-width: 600px) {
    .container {
        width: auto;
    }
}

@media screen and (min-width: 601px) {
    .container {
        margin-left: auto;
        margin-right: auto;
    }
}
</style>